<template>
  <div class="app-container productlibrary">
    <div class="cardBox">
      <div style="display: flex" :gutter="10">
        <div style="flex: 1">
          <el-button
            @click="gobackWay"
            type="text"
            icon="el-icon-arrow-left"
            style="color: rgba(0, 0, 0, 0.85)"
            >返回</el-button
          >
          <el-divider direction="vertical"></el-divider>
          <span>{{ id ? "修改本地团商品" : "添加本地团商品" }}</span>
        </div>
      </div>
    </div>
    <div
      class="cardBox"
      v-loading="loading"
      style="height: calc(85vh - 80px); margin-top: 20px; position: relative"
    >
      <el-steps :active="stepsActive" finish-status="success" simple>
        <el-step title="商品信息" icon="el-icon-s-goods"></el-step>
        <el-step title="使用规则" icon="el-icon-warning"></el-step>
        <el-step title="商品详情" icon="el-icon-s-order"></el-step>
      </el-steps>
      <el-scrollbar
        style="
          margin: 20px auto;
          height: calc(67vh - 80px);
          overflow-x: hidden !important;
        "
      >
        <div v-if="stepsActive == 0" style="width: 1100px; margin: 0 auto">
          <el-form
            :model="basicForm"
            :rules="basicRules"
            ref="basicForm"
            label-width="110px"
            class="demo-ruleForm"
          >
            <el-col :span="5">
              <el-form-item label="商品主图" prop="thumbnail">
                <logo-upload
                  :single-file="goodsFile"
                  :show-file-list="false"
                  accept="image/jpeg, image/png"
                  @uploadCallback="goodsCallback"
                />
              </el-form-item>
            </el-col>
            <el-col :span="22">
              <el-form-item label="商品轮播图" prop="slider_image">
                <logo-upload
                  :file-list="slider_imageFile"
                  :show-file-list="true"
                  accept="image/jpeg, image/png"
                  @uploadCallback="slider_imageCallback"
                />
              </el-form-item>
            </el-col>
            <el-col :span="11">
              <el-form-item label="商品名称" prop="name">
                <el-input
                  v-model.trim="basicForm.name"
                  maxlength="50"
                  clearable
                  show-word-limit
                  placeholder="请输入商品名称"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="11">
              <el-form-item label="关联商户" prop="loc_pur_mer_id">
                <el-select
                  v-model="basicForm.loc_pur_mer_id"
                  clearable
                  filterable
                  remote
                  reserve-keyword
                  placeholder="请输入关键词"
                  :remote-method="remoteMethodUser"
                  :loading="locPurMerIdLoading"
                >
                  <el-option
                    v-for="item in locPurMerIdList"
                    :key="item.id"
                    :label="item.name + '(' + item.responsible_person + ')'"
                    :value="item.id"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="11">
              <el-form-item label="商品类型" prop="type">
                <el-radio-group v-model="basicForm.type">
                  <el-radio :label="2">其他</el-radio>
                  <el-radio :label="1">虚拟商品</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
            <el-col :span="11">
              <el-form-item label="支付方式" prop="pay_type">
                <el-radio-group v-model="basicForm.pay_type">
                  <el-radio :label="1">现金支付</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>

            <el-col :span="11">
              <el-form-item label="团购价" prop="group_purchase_price">
                <el-input
                  v-model.trim="basicForm.group_purchase_price"
                  maxlength="10"
                  show-word-limit
                  clearable
                  placeholder="请输入团购价"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="11">
              <el-form-item label="原价" prop="scribe_price">
                <el-input
                  v-model.trim="basicForm.scribe_price"
                  maxlength="10"
                  show-word-limit
                  clearable
                  placeholder="请输入原价"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="11">
              <el-form-item label="库存" prop="inventory">
                <el-input
                  clearable
                  maxlength="11"
                  show-word-limit
                  v-model.trim="basicForm.inventory"
                  placeholder="请输入库存"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="11">
              <el-form-item label="初始销量" prop="initial_sales">
                <el-input
                  v-model.trim="basicForm.initial_sales"
                  maxlength="11"
                  show-word-limit
                  clearable
                  placeholder="请输入初始销量"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="11">
              <el-form-item label="商品状态" prop="status">
                <el-radio-group v-model="basicForm.status">
                  <el-radio :label="2">下架</el-radio>
                  <el-radio :label="1">上架</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
            <el-col :span="11">
              <el-form-item label="是否限购" prop="is_limit_buy">
                <el-radio-group v-model="basicForm.is_limit_buy">
                  <el-radio :label="2">不限购</el-radio>
                  <el-radio :label="1">限购</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
            <el-col :span="11" v-if="basicForm.is_limit_buy == 1">
              <el-form-item label="限购类型" prop="limit_buy_infotype">
                <el-radio-group v-model="basicForm.limit_buy_info.type">
                  <el-radio :label="2">总限购</el-radio>
                  <el-radio :label="1">每日限购</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
            <el-col
              :span="11"
              v-if="
                basicForm.is_limit_buy == 1 &&
                basicForm.limit_buy_info.type == 1
              "
            >
              <el-form-item label="日限购数量" prop="limit_buy_infoday">
                <el-input
                  v-model.trim="basicForm.limit_buy_info.day"
                  maxlength="11"
                  show-word-limit
                  clearable
                  placeholder="请输入初始销量"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col
              :span="11"
              v-if="
                basicForm.is_limit_buy == 1 &&
                basicForm.limit_buy_info.type == 2
              "
            >
              <el-form-item label="总限购数量" prop="limit_buy_infototal">
                <el-input
                  v-model.trim="basicForm.limit_buy_info.total"
                  maxlength="11"
                  show-word-limit
                  clearable
                  placeholder="请输入总限购数量"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="22">
              <el-form-item label="商品备注" prop="remark">
                <el-input
                  type="textarea"
                  maxlength="200"
                  show-word-limit
                  v-model="basicForm.remark"
                  placeholder="请输入商品备注"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-form>
        </div>
        <div v-if="stepsActive == 1" style="width: 1100px; margin: 0 auto">
          <el-form
            :model="configForm"
            :rules="configRules"
            ref="configForm"
            label-width="110px"
            class="demo-ruleForm"
          >
            <el-col :span="22">
              <el-form-item label="退款设置" prop="refund_type">
                <el-radio-group v-model="configForm.refund_type">
                  <el-radio :label="1">不可退</el-radio>
                  <el-radio :label="2">随时退/过期自动退</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
            <el-col :span="11">
              <el-form-item label="时效" prop="expiration_time">
                <el-radio-group
                  @click="expiration_timeWay"
                  v-model="configForm.expiration_time"
                >
                  <el-radio :label="1">永久有效</el-radio>
                  <el-radio :label="2">固定时间段</el-radio>
                  <el-radio :label="3">购买后多少天内可用</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
            <el-col :span="11" v-if="configForm.expiration_time == 1">
              <el-form-item label="过期时间配置" prop="expiration_value">
                <el-tag>永久有效</el-tag>
              </el-form-item>
            </el-col>
            <el-col :span="11" v-if="configForm.expiration_time == 2">
              <el-form-item label="选择时间段" prop="expiration_value">
                <el-date-picker
                  v-model="configForm.expiration_value"
                  type="datetimerange"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  value-format="yyyy-MM-dd HH:mm:ss"
                >
                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="11" v-if="configForm.expiration_time == 3">
              <el-form-item label="天数" prop="expiration_value">
                <el-input
                  v-model.trim="configForm.expiration_value"
                  maxlength="11"
                  show-word-limit
                  clearable
                  placeholder="请输入过期天数"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="22">
              <el-form-item label="过期处理" prop="refund_expiration_type">
                <el-radio-group v-model="configForm.refund_expiration_type">
                  <el-radio :label="1">过期自动核销</el-radio>
                  <el-radio :label="2">过期到店核销</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
            <el-col :span="22">
              <el-form-item label="使用日期" prop="use_data">
                <el-radio-group v-model="configForm.use_data">
                  <el-radio :label="1"
                    >周一至周五可用,周六周日节假日不可用</el-radio
                  >
                  <el-radio :label="2">周一至周日可用,节假日不可用</el-radio>
                  <el-radio :label="3">周一至周日可用,节假日也可用</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
            <el-col :span="22">
              <el-form-item label="使用时间" prop="use_time">
                <el-radio-group v-model="configForm.use_time">
                  <el-radio :label="1">营业时间内可用</el-radio>
                  <el-radio :label="2">全天24小时可用</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
            <el-col :span="22">
              <el-form-item label="使用规则" prop="use_rules">
                <el-input
                  type="textarea"
                  maxlength="200"
                  show-word-limit
                  v-model="configForm.use_rules"
                  placeholder="请输入使用规则"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-form>
        </div>
        <div
          v-if="stepsActive == 2"
          style="
            display: flex;
            justify-content: space-between;
            width: 1100px;
            margin: 0 auto;
          "
        >
          <div style="flex: 1; margin-right: 30px">
            <tinymce-editor
              v-if="id && Infodetail"
              v-model="Infodetail"
              :height="500"
            />
            <tinymce-editor v-else v-model="Infodetail" :height="500" />
          </div>
          <div style="width: 280px; position: relative">
            <div style="">
              <div class="phone">
                <div class="receiver">
                  <div></div>
                </div>
                <div class="html">
                  <el-scrollbar style="height: 500px; margin-top: 5px">
                    <div v-html="Infodetails"></div>
                  </el-scrollbar>
                </div>
              </div>
            </div>
          </div>
        </div>
      </el-scrollbar>
      <el-row style="text-align: center">
        <el-button
          type="primary"
          v-if="stepsActive !== 0"
          @click="setActiveItem('上一步')"
          >上一步</el-button
        >
        <el-button type="primary" v-if="stepsActive == 2" @click="submitSave()"
          >保存</el-button
        >
        <el-button
          type="primary"
          v-if="stepsActive !== 2"
          @click="setActiveItem('下一步')"
          >下一步</el-button
        >
      </el-row>
    </div>
  </div>
</template>

<script>
import {
  getMerchantList,
  addLocalGoods,
  getLocalGoodsDetail,
  editLocalGoods,
} from "@/api/groupbuying/index";
import LogoUpload from "@/components/FileUpload";
import TinymceEditor from "@/components/Tinymce";
export default {
  components: {
    LogoUpload,
    TinymceEditor,
  },
  data() {
    return {
      id: "",
      loading: true,
      stepsActive: 0,
      locPurMerIdList: [], // 商户数组
      basicForm: {
        loc_pur_mer_id: "", // 本地购商户ID
        name: "", // 名称
        type: 2, // 类型(1.虚拟商品,2.其他)
        thumbnail: "", // 商品缩略图
        slider_image: "", // 商品轮播图
        pay_type: 1, // 支付方式(1.现金支付,2.积分支付,3.提货券支付,4.积分+提货券支付,5.现金+积分支付,6.现金+提货券支付,7.现金+积分+提货券支付)
        group_purchase_price: "", // 团购价
        scribe_price: "", // 原价
        inventory: "", // 库存
        initial_sales: "", // 初始销量
        status: 1, // 状态(1.上架,2.下架)
        is_limit_buy: 2, // 是否限购(1.限购,2.不限购)
        limit_buy_info: {
          type: "", // 限购类型(1.用户每日限购,2.用户总限购)
          day: "", // 用户每日限购数量
          total: "", // 限用户总限购数量
        }, // 原价
        remark: "", // 备注
      }, // 商品信息数据表单
      goodsFile: {},
      slider_imageFile: [],
      locPurMerIdLoading: false,
      basicRules: {
        thumbnail: [
          {
            required: true,
            validator: (rule, value, callback) => {
              if (this.basicForm.thumbnail == "") {
                return callback(new Error("请上传商品主图"));
              }
              callback();
            },
            trigger: "change",
          },
        ],
        slider_image: [
          {
            required: true,
            validator: (rule, value, callback) => {
              if (this.slider_imageFile.length == 0) {
                return callback(new Error("请至少上传一张轮播图"));
              }
              callback();
            },
            trigger: "change",
          },
        ],
        name: [
          {
            required: true,
            validator: (rule, value, callback) => {
              const req = /[^0-9a-zA-Z\u4e00-\u9fa5]/g;
              if (value == "") {
                return callback(new Error("请输入商品名称"));
              }
              if (req.test(value)) {
                return callback(new Error("商品名称不能带有特殊字符"));
              }
              callback();
            },
            trigger: "change",
          },
        ],
        loc_pur_mer_id: [
          {
            required: true,
            validator: (rule, value, callback) => {
              const req = /[^0-9a-zA-Z\u4e00-\u9fa5]/g;
              if (value == "") {
                return callback(new Error("请选择关联商户"));
              }

              callback();
            },
            trigger: "change",
          },
        ],
        type: [
          {
            required: true,
            validator: (rule, value, callback) => {
              const req = /[^0-9a-zA-Z\u4e00-\u9fa5]/g;
              if (value == "") {
                return callback(new Error("请选择商品类型"));
              }
              callback();
            },
            trigger: "change",
          },
        ],
        pay_type: [
          {
            required: true,
            validator: (rule, value, callback) => {
              const req = /[^0-9a-zA-Z\u4e00-\u9fa5]/g;
              if (value == "") {
                return callback(new Error("请选择支付方式"));
              }
              callback();
            },
            trigger: "change",
          },
        ],
        group_purchase_price: [
          {
            required: true,
            validator: (rule, value, callback) => {
              if (!value) {
                callback(new Error("请输入团购价"));
              } else {
                let req = /^\d+(\.\d{1,2})?$/;
                if (req.test(value)) {
                  callback();
                } else {
                  callback(new Error("最多只能保留两位小数"));
                }
              }
            },
            trigger: "change",
          },
        ],
        scribe_price: [
          {
            required: true,
            validator: (rule, value, callback) => {
              if (!value) {
                callback(new Error("请输入团购价"));
              } else {
                if (
                  Number(value) < Number(this.basicForm.group_purchase_price)
                ) {
                  return callback(new Error("原价不应小于团购价"));
                }
                let req = /^\d+(\.\d{1,2})?$/;
                if (req.test(value)) {
                  callback();
                } else {
                  callback(new Error("最多只能保留两位小数"));
                }
              }
            },
            trigger: "change",
          },
        ],
        inventory: [
          {
            required: true,
            validator: (rule, value, callback) => {
              if (!value) {
                callback(new Error("请输入库存"));
              } else {
                let req = /\D/g;
                if (req.test(value)) {
                  callback(new Error("库存应是大于1的整数"));
                } else {
                  callback();
                }
              }
            },
            trigger: "change",
          },
        ],
        status: [
          {
            required: true,
            validator: (rule, value, callback) => {
              if (value === "") {
                callback(new Error("请选择商品上下架状态"));
              } else {
                callback();
              }
            },
            trigger: "change",
          },
        ],
        initial_sales: [
          {
            required: true,
            validator: (rule, value, callback) => {
              if (!value) {
                callback(new Error("请输入初始销量"));
              } else {
                let req = /\D/g;
                if (req.test(value)) {
                  callback(new Error("销量只能是整数"));
                } else {
                  if (Number(value) > 1000) {
                    return callback(new Error("有点过分了哈"));
                  }
                  callback();
                }
              }
            },
            trigger: "change",
          },
        ],
        limit_buy_infotype: [
          {
            required: true,
            validator: (rule, value, callback) => {
              if (this.basicForm.is_limit_buy == 2) {
                return callback();
              }
              if (this.basicForm.limit_buy_info.type === "") {
                callback(new Error("请选择限购类型"));
              } else {
                callback();
              }
            },
            trigger: "change",
          },
        ],
        limit_buy_infoday: [
          {
            required: true,
            validator: (rule, value, callback) => {
              if (
                this.basicForm.is_limit_buy == 1 &&
                this.basicForm.limit_buy_info.type == 1
              ) {
                if (this.basicForm.limit_buy_info.day === "") {
                  return callback(new Error("请输入限购数量"));
                } else {
                  let req = /\D/g;
                  if (req.test(this.basicForm.limit_buy_info.day)) {
                    return callback(new Error("请输入整数"));
                  }
                  callback();
                }
              } else {
                callback();
              }
            },
            trigger: "change",
          },
        ],
        limit_buy_infototal: [
          {
            required: true,
            validator: (rule, value, callback) => {
              if (
                this.basicForm.is_limit_buy == 1 &&
                this.basicForm.limit_buy_info.type == 2
              ) {
                if (this.basicForm.limit_buy_info.total === "") {
                  return callback(new Error("请输入限购数量"));
                } else {
                  let req = /\D/g;
                  if (req.test(this.basicForm.limit_buy_info.total)) {
                    return callback(new Error("请输入整数"));
                  }
                  callback();
                }
              } else {
                callback();
              }
            },
            trigger: "change",
          },
        ],
      },
      configForm: {
        refund_type: 2, // //退款类型(1.不可退,2.随时退/过期自动退)
        expiration_time: 1, // 过期时间类型(1.永久有效,2.固定时间(时间段),3.购买后多少天内可用)
        expiration_value: 0, // 过期时间配置值
        refund_expiration_type: 1, // 过期不可退处理(1.过期自动核销,2.过期到店核销)
        use_data: 3, // 使用日期(数据字典标签)
        use_time: 1, // 使用时间(数据字典标签)
        use_rules: "", // 使用规则
      },
      configRules: {
        refund_type: [
          {
            required: true,
            validator: (rule, value, callback) => {
              if (value === "") {
                return callback(new Error("请选择退款设置"));
              }
              callback();
            },
            trigger: "change",
          },
        ],
        expiration_time: [
          {
            required: true,
            validator: (rule, value, callback) => {
              if (value === "") {
                return callback(new Error("请选择时效"));
              }
              callback();
            },
            trigger: "change",
          },
        ],
        expiration_value: [
          {
            required: true,
            validator: (rule, value, callback) => {
              const req = /\D/g;
              if (this.configForm.expiration_time == 2) {
                if (this.configForm.expiration_value.length == 0) {
                  return callback(new Error("请选择时间段"));
                } else {
                  callback();
                }
              } else if (this.configForm.expiration_time == 3) {
                if (req.test(value)) {
                  return callback(new Error("请输入整数"));
                } else {
                  callback();
                }
              }
              callback();
            },
            trigger: "change",
          },
        ],
        refund_expiration_type: [
          {
            required: true,
            validator: (rule, value, callback) => {
              if (value === "") {
                return callback(new Error("请选择过期处理"));
              }
              callback();
            },
            trigger: "change",
          },
        ],
        use_data: [
          {
            required: true,
            validator: (rule, value, callback) => {
              if (value === "") {
                return callback(new Error("请选择使用日期"));
              }
              callback();
            },
            trigger: "change",
          },
        ],
        use_time: [
          {
            required: true,
            validator: (rule, value, callback) => {
              if (value === "") {
                return callback(new Error("请选择使用时间"));
              }
              callback();
            },
            trigger: "change",
          },
        ],
        use_rules: [
          {
            required: true,
            validator: (rule, value, callback) => {
              if (value === "") {
                return callback(new Error("请输入使用规则"));
              }
              callback();
            },
            trigger: "change",
          },
        ],
      },
      Infodetail: "", // 详情
      Infodetails: "", // 详情
      // 数据留存
      cacheForm: {},
    };
  },
  watch: {
    Infodetail(val) {
      this.Infodetails = val.replaceAll(
        "<img",
        '<img mode="widthFix" style="max-width:250px;"'
      );
    },
  },
  created() {
    var arr = [];
    const p1 = new Promise((req, rej) => {
      getMerchantList({
        count: 20,
        page: 1,
      }).then((res) => {
        if (res.code !== 200 || res.status !== 1) {
          this.$messages.error(res.msg);
          rej();
        }
        this.locPurMerIdList = res.data.list;
        req();
      });
    });

    if (this.$route.query.id) {
      this.id = this.$route.query.id;
      const p2 = new Promise((req, rej) => {
        getLocalGoodsDetail({ id: this.id }).then((res) => {
          if (res.code !== 200 || res.status !== 1) {
            this.$messages.error(res.msg);
            rej();
          }
          this.cacheForm = res.data;
          req();
        });
      });
      arr = [p1, p2];
    } else {
      arr = [p1];
    }
    Promise.all(arr)
      .then(() => {
        this.loading = false;
        if (this.id) {
          this.EchoWay();
        }
      })
      .catch(() => {
        this.loading = false;
      });
  },
  methods: {
    EchoWay() {
      console.log(this.cacheForm);
      this.basicForm.loc_pur_mer_id = this.cacheForm.basic.loc_pur_mer_id;
      this.basicForm.name = this.cacheForm.basic.name;
      this.basicForm.type = this.cacheForm.basic.type;
      this.goodsFile = {
        url: this.cacheForm.basic.thumbnail,
      };
      this.basicForm.thumbnail = this.cacheForm.basic.thumbnail;
      this.slider_imageFile = [];
      var arr = this.cacheForm.basic.slider_image.split(",");
      arr.forEach((item) => {
        this.slider_imageFile.push({ url: item });
      });
      this.basicForm.slider_image = this.cacheForm.basic.slider_image;
      this.basicForm.pay_type = this.cacheForm.basic.pay_type;
      this.basicForm.group_purchase_price =
        this.cacheForm.basic.group_purchase_price;
      this.basicForm.scribe_price = this.cacheForm.basic.scribe_price;
      this.basicForm.inventory = this.cacheForm.basic.inventory;
      this.basicForm.initial_sales = this.cacheForm.basic.initial_sales;
      this.basicForm.status = this.cacheForm.basic.status;
      this.basicForm.is_limit_buy = this.cacheForm.basic.is_limit_buy;
      this.basicForm.limit_buy_info = this.cacheForm.basic.limit_buy_info;
      this.basicForm.remark = this.cacheForm.basic.remark;

      this.configForm.refund_type = this.cacheForm.config.refund_type;
      this.configForm.expiration_time = this.cacheForm.config.expiration_time;
      this.configForm.expiration_value = this.cacheForm.config.expiration_value;
      this.configForm.refund_expiration_type =
        this.cacheForm.config.refund_expiration_type;
      this.configForm.use_data = this.cacheForm.config.use_data;
      this.configForm.use_time = this.cacheForm.config.use_time;
      this.configForm.use_rules = this.cacheForm.config.use_rules;

      this.Infodetail = this.cacheForm.detail.details;
    },
    goodsCallback(file) {
      this.goodsFile = file;
      this.basicForm.thumbnail = file.url;
    },
    slider_imageCallback(singleFile) {
      this.slider_imageFile = singleFile;
      let obj = [];
      singleFile.forEach((item) => {
        obj.push(item.url);
      });
      let banners = obj.join();
      this.basicForm.slider_image = banners;
    },
    // 根据搜索条件获取用户列表
    remoteMethodUser(query) {
      this.locPurMerIdLoading = true;
      getMerchantList({
        count: 20,
        page: 1,
      }).then((res) => {
        if (res.code !== 200 || res.status !== 1) {
          this.locPurMerIdLoading = false;
          return this.$messages.error(res.msg);
        }
        this.locPurMerIdLoading = false;
        this.locPurMerIdList = res.data.list;
      });
    },
    expiration_timeWay(val) {
      if (val == 1) {
        this.configForm.expiration_value = 0;
      } else if (2) {
        this.configForm.expiration_value = [];
      } else {
        this.configForm.expiration_value = "";
      }
    },
    setActiveItem(row) {
      if (row == "下一步") {
        if (this.stepsActive == 0) {
          this.$refs.basicForm.validate((valid, err) => {
            if (valid) {
              this.stepsActive++;
              console.log("商品信息当前是否验证通过");
            } else {
              var index = 0;
              var str = "";
              for (var key in err) {
                if (index == 0) {
                  str = err[key][0].message;
                }
                index++;
              }
              this.$messages.warning(str);
              return false;
            }
          });
        } else if (this.stepsActive == 1) {
          this.$refs.configForm.validate((valid, err) => {
            if (valid) {
              this.stepsActive++;
            } else {
              var index = 0;
              var str = "";
              for (var key in err) {
                if (index == 0) {
                  str = err[key][0].message;
                }
                index++;
              }
              this.$messages.warning(str);
              return false;
            }
          });
        }
      } else {
        this.stepsActive--;
      }
    },
    submitSave() {
      let _this = this;
      const p3 = new Promise((req, rej) => {
        if (_this.Infodetail == "") {
          _this.stepsActive = 2;
          rej();
          _this.$messages.error("请设置商品详情");
          return false;
        } else {
          req();
        }
      });
      Promise.all([p3])
        .then(() => {
          _this.loading = true;
          if (this.id) {
            var data = {
              basic: {
                ..._this.basicForm,
              },
              config: {
                ..._this.configForm,
              },
              detail: {
                details: _this.Infodetail,
              },
            };
            editLocalGoods({ data: data, id: this.id }).then((res) => {
              if (res.code !== 200 || res.status !== 1) {
                _this.loading = false;
                return _this.$messages.error(res.msg);
              }
              _this.loading = false;
              _this.$messages.success(res.msg);
              _this.gobackWay();
            });
          } else {
            var data = {
              basic: {
                ..._this.basicForm,
              },
              config: {
                ..._this.configForm,
              },
              detail: {
                details: _this.Infodetail,
              },
            };
            addLocalGoods({ data: data }).then((res) => {
              if (res.code !== 200 || res.status !== 1) {
                _this.loading = false;
                return _this.$messages.error(res.msg);
              }
              _this.loading = false;
              _this.$messages.success(res.msg);
              _this.gobackWay();
            });
          }
        })
        .catch((err) => {});
    },
    // 返回本地团商品列表
    gobackWay() {
      this.$router.push("/groupbuying/groupbuyingselection");
    },
  },
};
</script>

<style lang="scss" scoped>
.phone {
  position: relative;

  width: 280px;
  height: 530px;
  border: 5px solid #949494;
  border-radius: 40px;
}

.phone:before {
  content: "";
  position: absolute;
  width: 269px;
  height: 519px;
  background-color: #000;
  border-radius: 33px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.phone:after {
  content: "";
  position: absolute;
  width: 264px;
  height: 519px;
  background: #fff;
  border-radius: 28px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.html {
  position: absolute;
  width: 264px - 5px - 5px;
  height: 519px - 5px - 5px;
  background: #fff;
  border-radius: 30px;
  overflow: hidden;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 5px;
  z-index: 1;
}

.receiver {
  position: absolute;
  top: 5px;
  left: 50%;
  margin-left: -50px;
  background: #000000;
  border: #484848 1px solid;
  width: 100px;
  height: 8px;
  z-index: 9;
  border-radius: 20px;
}

.receiver ul {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  margin: 1px;
  justify-content: space-around;
}

.receiver ul li {
  background: #303030;
  width: 1px;
  height: 1.5px;
  float: left;
  transform: skewX(-38deg);
}
.receiver div {
  width: 100px;
  height: 8px;
}

.receiver div:after {
  content: "";
  display: block;
  width: 95%;
  height: 83%;
  top: 1px;
  left: 3px;
  position: absolute;
  background-repeat: no-repeat;
  background-image: repeating-linear-gradient(
      to right,
      #434242,
      #000000 1px,
      rgba(255, 255, 255, 0) 1px,
      rgba(255, 255, 255, 0) 3px
    ),
    repeating-linear-gradient(
      to right,
      #434242,
      #19191d 1px,
      rgba(255, 255, 255, 0) 1px,
      rgba(255, 255, 255, 0) 3px
    );
  background-size: 100% 50%;
  background-position: 0 0, 2px 4px;
  transform: skew(-25deg);
}
</style>
<style>
.productlibrary .el-scrollbar__wrap {
  overflow-x: hidden !important;
}
.productlibrary .el-carousel__arrow--right {
  display: none !important;
}
.productlibrary .el-carousel__arrow--left {
  display: none !important;
}
.productlibrary .el-upload--picture-card {
  width: 90px !important;
  height: 90px !important;
  line-height: 90px;
}

.productlibrary .el-upload-list--picture-card .el-upload-list__item-actions {
  width: 90px !important;
  height: 90px !important;
}

.productlibrary .el-upload-list--picture-card .el-upload-list__item-thumbnail {
  width: 90px !important;
  height: 90px !important;
}

.productlibrary .el-upload-list--picture-card .el-upload-list__item {
  width: 90px !important;
  height: 90px !important;
}
</style>